@charset "UTF-8";

//-----------------------------------------------------
// animate.scss
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
//-----------------------------------------------------

%animation-basic {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

// fade in/out
//-----------------------------------------------------

@mixin animation-fade-in($className: fade, $from: 0) {
    $name: str-insert(In, $className, 0);

    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @include animation-fade($name: $name, $from: $from);
}

@mixin animation-fade-out($className: fade, $to: 0) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @include animation-fade($name: $name, $from: 1, $to: $to);
}

// shrink in/out
//-----------------------------------------------------

@mixin animation-shrink-in($className: shrink, $from: 0.815) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }
    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: scale($from);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

@mixin animation-shrink-out($className: shrink, $to: 1.185) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale($to);
        }
    }
}

// down in/out
//-----------------------------------------------------

@mixin animation-down-in($className: down, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-down-out($className: down, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// up in/out
//-----------------------------------------------------

@mixin animation-up-in($className: up, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate(0, $value);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-up-out($className: up, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate(0, $value);
        }
    }
}

// left in/out
//-----------------------------------------------------

@mixin animation-left-in($className: left, $value: -100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-left-out($className: left, $value: -100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}

// right in/out
//-----------------------------------------------------

@mixin animation-right-in($className: right, $value: 100%) {
    $name: str-insert(In, $className, 0);
    
    .#{$className}-in {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 0;
            transform: translate($value, 0);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}

@mixin animation-right-out($className: right, $value: 100%) {
    $name: str-insert(Out, $className, 0);

    .#{$className}-out {
        animation-name: $name;
        @extend %animation-basic;
    }

    @keyframes #{$name} {
        0% {
            opacity: 1;
            transform: translate(0, 0);
        }
        100% {
            opacity: 0;
            transform: translate($value, 0);
        }
    }
}


/*弹性动画*/
@keyframes leftIn {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: translate3d(0, 0, 0);
  }

  60% {
    transform: translate3d(358px, 0, 0);
  }

  75% {
    transform: translate3d(323px, 0, 0);
  }

  90% {
    transform: translate3d(338px, 0, 0);
  }

  to {
    transform: translate3d(333px, 0, 0);
  }
}

%anmLeftIn {
    animation-duration: .8s;
    animation-fill-mode: both;
    animation-name: leftIn;
}

@keyframes leftOut {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: translate3d(333px, 0, 0);
  }

  60% {
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

%anmLeftOut {
    animation-duration: .8s;
    animation-name: leftOut;
}

@keyframes smallLeftIn {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: translate3d(0, 0, 0);
  }

  60% {
    transform: translate3d(325px, 0, 0);
  }

  75% {
    transform: translate3d(290px, 0, 0);
  }

  90% {
    transform: translate3d(305px, 0, 0);
  }

  to {
    transform: translate3d(300px, 0, 0);
  }
}

%anmSmallLeftIn {
    animation-duration: .8s;
    animation-fill-mode: both;
    animation-name: smallLeftIn;
}

@keyframes smallleftOut {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    transform: translate3d(333px, 0, 0);
  }

  60% {
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

%anmSmallLeftOut {
    animation-duration: .8s;
    animation-fill-mode: both;
    animation-name: smallleftOut;
}